<template>
  <div class="goods dpflex">
    <div class="left">
      <div class="left-content">
        <van-sidebar v-model="active">
          <van-sidebar-item
            :title="item.name"
            v-for="(item, index) in goodsList"
            :key="index"
            @click="changeLeftActive(index)"
          />
        </van-sidebar>
      </div>
    </div>
    <div class="right flex1">
      <div class="right-content">
        <div
          class="item"
          v-for="(item, index) in goodsList"
          :key="index + '11'"
          :id="index"
        >
          <h5>{{ item.name }}</h5>
          <van-card
            v-for="item1 in item.foods"
            :key="item1.id"
            :title="item1.name"
            :price="item1.price"
            :origin-price="item1.price + 5"
            :thumb="item1.imgUrl"
          >
            <template #tags>
              <van-tag type="danger">下饭</van-tag>
            </template>
            <template #price-top>
              <p>月售 {{ item1.sellCount }} 份，好评度 {{ item1.rating }}%</p>
            </template>

            <template #footer>
              <span v-if="item1.num > 0">
                <van-button
                  icon="minus"
                  type="danger"
                  size="mini"
                  @click="item1.num--"
                >
                </van-button>
                {{ item1.num }}
              </span>

              <van-button
                icon="plus"
                type="danger"
                size="mini"
                @click="item1.num++"
              ></van-button>
            </template>
          </van-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { getGoodsList } from "@/api";
import { GoodsData, Foods, SeatObj } from "@/types";
import BScroll from "@better-scroll/core";

@Component
export default class Goods extends Vue {
  active = 0;
  rightBS: any = "";
  seatArr: Array<SeatObj> = [];
  //左联动 右
  changeLeftActive(index: number) {
    console.log(index);
    // let dom = document.querySelector('#'+index)
    let dom = document.getElementById("" + index);
    this.rightBS.scrollToElement(dom, 1000);
  }
  //计算数组 [{index:0,min:215,max:500},{index:1,min:500,max:1500}]
  seatRangeData() {
    this.$nextTick(() => {
      let items = document.querySelectorAll(".item");
      items.forEach((item: any, index: number): void => {
        let obj: SeatObj = {
          index: index,
          min: item.offsetTop,
          max: item.offsetTop + item.offsetHeight,
        };
        this.seatArr.push(obj);
      });
      console.log(this.seatArr);
    });
  }
  //钩子函数
  async created() {
    let res = await getGoodsList();
    //获取到数据之后 给每一个 foods对象 加一个属性 num:0  用户加入购物车数量
    res.data.goodsList.forEach((item: GoodsData) => {
      item.foods.forEach((item1: Foods) => {
        item1.num = 0;
      });
    });

    //提交数据到 vuex
    this.$store.commit("addGoodsList", res.data.goodsList);

    //调用初始化 scroll
    this.initBS();

    //计算 item范围数组
    this.seatRangeData();
  }

  //初始化 BS
  initBS() {
    let leftBS = new BScroll(".left", {
      click: true,
    });

    this.rightBS = new BScroll(".right", {
      click: true,
      probeType: 2, //当用户手指 触摸 右边的列表 滚动事件自动触发
    });

    //滚动监听
    this.rightBS.on("scroll", (position: any) => {
      let y = Math.abs(position.y) + 215;
      //循环判断 y 值  在 数组中哪个元素的范围值中 {min max  index}
      this.seatArr.forEach((item) => {
        // y>=item.min && y<=item.max 范围判断
        if (y >= item.min && y <= item.max) {
          this.active = item.index;
        }
      });
    });
  }

  //获取vuex的数据 计算属性
  get goodsList(): Array<GoodsData> {
    return this.$store.state.goodsList; //[GoodsData,GoodsData]
  }
}
</script>

<style scoped lang="less">
.goods {
  width: 100%;
  height: 100%;
}
.left {
  width: 80px;
  height: 100%;

  // overflow-y: scroll;
  p {
    height: 30px;
  }
}
.right {
  height: 100%;
  // overflow-y: scroll;

  .right-content {
    padding: 15px;
  }
}
.van-sidebar-item--select::before {
  background: #f60;
}
.title {
  font-size: 20px;
  color: #000;
}
</style>
